<template>
  <el-dialog
    class="set-progress-mark-model"
    title="进度标签设置"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    append-to-body
    :width="$setRem(650)"
    :before-close="handleCancel">
    <el-form
      class="set-progress-form"
      size="medium"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :label-width="$setRem(120)"
    >
      <el-row>
        <el-col :span="22">
          <el-form-item label="任务名称" prop="scheduleId" required>
            <select-tree
              placeholder="请选择节点"
              :menus="menus"
              :defaultProps="{
                children: 'childrenList',
                label: 'scheduleName'
              }"
              :getData="getCurrentData"
              v-model="ruleForm.scheduleId">
            </select-tree>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="标签类型" prop="labelType" required>
            <el-select v-model="ruleForm.labelType">
              <el-option value="1" label="图片">图片</el-option>
              <el-option value="2" label="地图">地图</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="位置" prop="location" required>
            <location
              v-if="ruleForm.labelType === '2'"
              v-model="ruleForm.location"
              :hasAltitude="false">
            </location>
            <picture-mark v-else v-model="ruleForm.location"></picture-mark>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="备注信息"
              v-model="ruleForm.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="hanldeSave">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import selectTree from '@/components/public/selectTree';
import location from '@/components/project/surveillance/location';
import PictureMark from '@/components/project/surveillance/PictureMark';

export default {
  components: {
    selectTree,
    location,
    PictureMark
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    },
    // 进度类型（1：总体进度；2：月进度）
    scheduleType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      menus: [],
      ruleForm: {
        id: '',
        labelType: '1',
        labelName: '',
        scheduleId: '',
        remark: '',
        location: {
          lng: '',
          lat: '',
          x: '',
          y: '',
        }
      },
      rules: {
        scheduleId: [
          { required: true, message: '请选择节点' }
        ],
        location: [
          { required: true, message: '请完善位置信息' },
          { validator: this.locationValidator, trigger: 'blur' }
        ],
      },
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  watch: {
    options: {
      deep: true,
      handler: function (data) {
        if (this.$checkType(data) !== 'object') return;
        const { pointPosition } = data;
        Object.keys(data).length && Object.keys(this.ruleForm).forEach(key => {
          const value = data[key];
          if (key === 'location') {
            let location = {};
            try {
              if (pointPosition) location = JSON.parse(pointPosition);
            } catch (e) {}
            this.ruleForm[key] = location;
            return;
          }
          if (key === 'labelType') {
            this.ruleForm[key] = value || '1';
            return;
          }
          this.ruleForm[key] = value || '';
        });
      }
    },
    visible(val) {
      if (!val) {
        this.ruleForm = {
          id: '',
          labelType: '1',
          labelName: '',
          scheduleId: '',
          remark: '',
          location: {
            lng: '',
            lat: '',
            x: '',
            y: '',
          }
        };
        return;
      }
      this.getProgressList();
    }
  },
  methods: {
    async getProgressList() {
      const params = {
        pageFlag: false,
        projectId: this.projectId,
        scheduleType: this.scheduleType,
      };
      const { success, data: {
        data
      }} = await this.$Model.getProgressList(params);
      if (success && data) {
        this.menus = data.list || [];
      }
    },
    getCurrentData(data) {
      this.ruleForm.labelName = data.scheduleName;
    },
    /**
     * 校验位置信息
     */
    locationValidator(rule, value, callback) {
      const check = Object.keys(this.ruleForm.location).some(key => {
        return !value[key] || /^\s+$/.test(value[key]);
      });
      if (check) return callback('请完善位置信息');
      return callback();
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    },
    hanldeSave() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('save', {
            ...this.ruleForm,
            scheduleType: this.scheduleType
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .set-progress-mark-model {
    .set-progress-form {
      width: 100%;
      padding-right: 30px;
    }
    /deep/ .picture-mark-comp {
      .el-input {
        width: 160px;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
</style>
